<template>
	<div class="view">
		<!-- <template>
			<Top :title="'留言列表'"></Top>
		</template> -->
		<div class="header">
			<div class="h_exit" @click="toIndex">
				<i class="i-exit i-20 i-mr-10"></i>
				<div class="h_str">返回上一页</div>
			</div>
			<div class="h_con">
				<div class="h_li">技能培训</div>
			</div>
		</div>

		<div class="main">
			<div class="main_con">
				<div class="m_title">技能培训</div>
				<div class="line">
					<div class="search">
						<el-input placeholder="请输入关键词" suffix-icon="el-icon-search" v-model="keywords"
							@change="search" size="medium" style="width: 200px;">
						</el-input>
						<el-button type="primary" size="medium" @click="search">搜索</el-button>
						<el-button icon="el-icon-plus" @click="add()" type="primary" size="medium">新增数据</el-button>
					</div>
				</div>

				<div class="table">
					<el-table style="width: 100%;" :data="dataList" :height="table_height">
						<el-table-column type="selection" min-width="5%" align="center">
						</el-table-column>
						<el-table-column type="index" :index="1" label="行号" min-width="10%" align="center">
						</el-table-column>
                        <el-table-column prop="title" label="标题" min-width="15%" align="center">
						</el-table-column>
                        <el-table-column prop="url" label="appid" min-width="20%" align="center">
						</el-table-column>
                        <el-table-column prop="path" label="页面路径" min-width="20%" align="center">
						</el-table-column>
						<el-table-column prop="isHidden" label="是否隐藏" min-width="15%" align="center">
							<template slot-scope="scope">
								<el-switch v-model="scope.row.isHidden" active-color="#13ce66" inactive-color="#A5ADBA"
									:active-value="1" :inactive-value="0" @change="isOkHandler(scope.row)">
								</el-switch>
							</template>
						</el-table-column>
						<el-table-column  label="操作" min-width="30%" align="center">
							<template slot-scope="scope">
								<el-button size="mini" plain @click="edit(scope.row)">编辑</el-button>
								<el-button size="mini" plain @click="remove(scope.row)" v-if="scope.row.title.indexOf('培训机构') == -1">移除</el-button>
								<el-button size="mini" plain @click="toList" v-if="scope.row.title.indexOf('培训机构') != -1">机构列表</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="item_bottom">
					<div class="item_num">共{{ total }}条信息</div>
					<div class="item_page">
						<el-pagination background layout="prev, pager, next" :total="total"
							@current-change="handleCurrentChange">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>


		<el-drawer :visible.sync="drawer" :direction="direction" size="50%" :wrapperClosable="false">
			<template slot="title">
				<div class="h_exit" @click="drawer = false">
					<i class="i-16 i-exit i-mr-6"></i>返回
				</div>
			</template>
			<div class="d_container">
				<el-form label-position="top" ref="form" :model="form" :rules="rules">
					<el-form-item prop="picdir">
						<div class="item_data">
							<div class="d_img">
								<img src="../../../assets/image/add_img.png" v-if="form.picdir==''">
								<img :src="$api.imgUrl+form.picdir" v-else>
							</div>
							<div class="d_detail">
								<div class="d_title">图标</div>
								<div class="d_title2">支持jpeg、jpg、png图片格式</div>
								<!-- <div class="d_title2">建议最佳的尺寸为750X412px图片大小建议不超过5MB</div> -->
								<div class="d_btn">
									<el-button icon="el-icon-plus" type="primary" size="medium"
										@click="uploadPicture('flagImg','1')">添加图标</el-button>
								</div>
							</div>
						</div>
					</el-form-item>
					<div class="main_view">
						<div class="v_box">
							<el-form-item label="标题" prop="title">
								<el-input v-model="form.title" placeholder="请输入标题" style="width: 400px;"></el-input>
							</el-form-item>
							<el-form-item label="APPID" prop="url">
								<el-input placeholder="请输入APPID" v-model="form.url" style="width: 400px;"></el-input>
							</el-form-item>
							<el-form-item label="页面地址" prop="path">
								<el-input placeholder="请输入页面地址" v-model="form.path" style="width: 400px;"></el-input>
							</el-form-item>
						</div>
					</div>
				</el-form>
			</div>
			<div class="d_bottom">
				<div class="d_btn">
					<el-button size="small" plain @click="drawer = false">返回</el-button>
				</div>
				<div class="d_btn">
					<el-button size="small" type="primary" @click="submitForm('form')" :disabled="addTrue">保存
					</el-button>
				</div>
			</div>
		</el-drawer>

		
		<!--查看大封面-->
		<el-dialog title="查看大封面" :visible.sync="imgVisible" center :close-on-click-modal="false">
			<img :src="$api.imgUrl+imgName" v-if="imgVisible" style="width: 100%" alt="查看">
		</el-dialog>

		<FileUpload @fileChange="imgFileChange" ref="imgFile" accept="image/*"></FileUpload>

	</div>
</template>

<script>
import Top from "../../../components/top.vue"
import utilData from "../../../util/data.js"
import FileUpload from "@/components/FileUpload.vue"
export default {
	components: {
		Top,FileUpload
	},
	data() {
		return {
			keywords: "",
			table_height: document.documentElement.clientHeight - 360,
			diaHeight: document.documentElement.clientHeight - 142,
			dataList: [],
			total: 10,
			dialogVisible: false,

			form: {
				picdir:'',
				title: "",
				url: "",
				path: "",
			},
			rules: {
				title: [
					{ required: true, message: '请输入标题', trigger: ['blur,change'] }
				],
				url: [
					{ required: true, message: '请输入APPID', trigger: ['blur,change'] }
				],
			},

			li_num: 1,
			left: 0,
			current: 1,
			limit: 10,
			isEdit:false,
			addTrue:false,
			imgVisible:false,
			p_index: "",
			img_upload: "",

			drawer: false,
        	direction: 'rtl',
			editorConfig: {
					elementPathEnabled: false,
					// 你的UEditor资源存放的路径,相对于打包后的index.html
					UEDITOR_HOME_URL: "@/../../static/ueditor/",
					// 编辑器不自动被内容撑高
					autoHeightEnabled: false,
					// 初始容器高度
					initialFrameHeight: 400,
					// 初始容器宽度
					initialFrameWidth: "100%",
					// 上传文件接口
					// serverUrl: '/oss/uploadfile/',
					// 关闭自动保存
					enableAutoSave: false,
					// 自定义工具栏，需要额外选项可以参考ueditor.config.js
					abc: {},
				},
		}

	},
	methods: {
		toList(){
			this.$router.push("/server/jineng/jigou")
		},
		add(){
			this.form = {
				picdir:'',
				title: "",
				url:"",
				path:"",
			}
			this.drawer = true
		},
		//弹窗关闭
		handleClose(done) {
			this.$confirm('确认关闭？')
			.then(_ => {
				done();
			})
			.catch(_ => {});
		},

		// 表单验证
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.upload()
				}
			});
		},
		// 上传
		upload() {
			this.addTrue = true

			let url = ""
			let data
			const id = this.form.id
			if(id){
				url = this.$api.serveContentEdit
				data = this.form
			}else{
				url = this.$api.serveContentAdd
				data = {...this.form,cataname:utilData.jinengCataname}
			}

			this.$http({
				'method': 'post',
				'url': url,
				data: data
			}).then(res => {

				if (res.data.code == 20000) {
					this.drawer = false
					this.$refs.form.resetFields()
					this.$message({
						message: res.data.message,
						type: 'success'
					})
					this.dataInit()

				} else {
					this.$message.error(res.data.message)
				}
				this.addTrue = false
			})

		},

		// 修改用户
		edit(item){
			this.$http({
				url: this.$api.serveContentOne+item.id,
				method: 'get',
			}).then(res => {
				if (res.data.code == 20000) {
					console.log(res.data.data)
					const detail = res.data.data.detail;
					this.form.id = detail.id
					this.form.title = detail.title
					this.form.picdir = detail.picdir
					this.form.url = detail.url
					this.form.path = detail.path
					
					this.drawer = true
				}else{
					this.$message.success(res.data.message)
				}
			})
		},

		// 是否有效
		isOkHandler(item) {
			this.$http({
				url: this.$api.serveContentEdit,
				method: 'post',
				data: {
					id: item.id,
					isHidden: item.isHidden
				}
			}).then(res => {
				if (res.data.code == 20000) {
					this.$message.success(res.data.message)
				} else {
                    item.isHidden = item.isHidden==0? 1:0
					this.$message.error(res.data.message)
				}
			})
		},

		// 搜索
		search() {
			this.current = 1
			this.dataInit()
		},
		toIndex() {
			this.$router.push('/server')
		},
		

		dataInit() {
			this.$http({
				'method': 'post',
				'url': this.$api.serveContentList,
				data: {
					current: this.current,
					limit: this.limit,
					keywords: this.keywords,
					cataname: utilData.jinengCataname,
				}
			}).then(res => {
				if (res.data.code == 20000) {
					this.dataList = res.data.data.list
					this.total = res.data.data.total
					console.log(this.dataList)
				}
			})
		},
		// 图片上传
		uploadPicture(name, type) {
			this.p_index = type
			this.$refs.imgFile.open();
		},
		imgFileChange(data) {
			if (this.p_index == '1') {
				this.form.picdir = data
			}
		},

		// 分页
		handleCurrentChange(num) {
			this.current = num;
			this.dataInit();
		},

		//图片上传成功后
		handleUploadSuccess(data) {
			this.cropperModel = false;
			this.cropperName = '';
			this.form1.picdir = data.url
		},

		// 删除
		remove(item) {
				this.$confirm('是否删除此信息?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url:this.$api.serveContentRemove+item.id
					}).then(res =>{
						if(res.data.code==20000){
							this.$message.success(res.data.message);
							this.dataInit();
						}else{
							this.$message(res.data.message)
						}
					})
				}).catch(() => {
					
				});
			},
	},
	created() {
		this.dataInit()
	}

}
</script>

<style scoped>
@import url("../../../assets/css/class.css");
@import url("../../../assets/css/drawer.css");
>>>.el-drawer__close-btn .el-icon {
	display: block;
}
.d_img{
	width: 160px;
	height: 160px;
}
.d_img img{
	width: 160px;
	height: 160px;
}
</style>
